<template>
  <div class="qualified-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1>入围信息查询</h1>
        <p class="subtitle">各院校提前招生入围查询入口汇总</p>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="container">
      <!-- 面包屑导航 -->
      <Breadcrumb />
      
      <div class="main-content">
        <!-- 院校入围查询列表 -->
        <el-card class="schools-card" shadow="hover">
          <template #header>
            <h2><el-icon><DataLine /></el-icon> 院校入围查询汇总</h2>
          </template>
          
          <el-table 
            v-loading="loading" 
            :data="schools" 
            stripe 
            style="width: 100%"
            :header-cell-style="{ 'background-color': '#f5f7fa', 'color': '#303133', 'font-weight': '500' }"
          >
            <el-table-column 
              prop="schoolName" 
              label="院校名称" 
              min-width="320"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                <div class="school-name">{{ row.schoolName }}</div>
              </template>
            </el-table-column>
            <el-table-column 
              prop="qualifiedAnnounceTime" 
              label="2025公布入围" 
              width="140"
              align="center"
            >
              <template #default="{ row }">
                <div class="announce-time">
                  {{ row.qualifiedAnnounceTime || '待公布' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column 
              label="入围查询" 
              width="120"
              align="center"
            >
              <template #default="{ row }">
                <el-button 
                  v-if="row.qualifiedQueryUrl && row.qualifiedQueryUrl !== '#'"
                  type="primary" 
                  size="small"
                  @click="openQueryPage(row.qualifiedQueryUrl)"
                  class="action-btn"
                >
                  查询入围
                </el-button>
                <div v-else class="no-link">暂未开通</div>
              </template>
            </el-table-column>
            <el-table-column 
              label="交流群" 
              width="120"
              align="center"
            >
              <template #default="{ row }">
                <el-button 
                  v-if="row.communicationGroupUrl && row.communicationGroupUrl !== '#'"
                  type="success" 
                  size="small"
                  @click="openCommunicationGroup(row.communicationGroupUrl)"
                  class="action-btn"
                >
                  加入群聊
                </el-button>
                <div v-else class="no-link">暂无群聊</div>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 空状态 -->
          <el-empty 
            v-if="!loading && schools.length === 0"
            description="暂无院校信息"
            :image-size="120"
          />
        </el-card>
        
        <!-- 使用说明 -->
        <el-card class="notice-card" shadow="never">
          <template #header>
            <h2><el-icon><Warning /></el-icon> 使用说明</h2>
          </template>
          <div class="notice-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <h3>入围查询说明</h3>
                <ul>
                  <li>请点击对应院校的"查询入围"按钮进入院校官方查询系统</li>
                  <li>查询时需要提供身份证号、姓名等个人信息</li>
                  <li>入围结果一般在报名结束后15个工作日内公布</li>
                  <li>如查询遇到问题，请联系对应院校招生办</li>
                </ul>
              </el-col>
              <el-col :span="12">
                <h3>交流群说明</h3>
                <ul>
                  <li>点击"加入群聊"可进入该院校的招生咨询群</li>
                  <li>群内可以获得最新的招生信息和考试动态</li>
                  <li>可与同院校考生交流备考经验</li>
                  <li>群内有招生老师解答相关问题</li>
                </ul>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { DataLine, Warning } from '@element-plus/icons-vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import api from '@/api'

// 响应式数据
const loading = ref(false)
const schools = ref([])

// 获取年度招生信息（入围查询）
const loadSchools = async () => {
  loading.value = true
  try {
    const { data } = await api.get('/annual-enrollment/by-type', { 
      params: { 
        year: 2025,
        type: 'qualified'
      } 
    })
    schools.value = data || []
  } catch (error) {
    ElMessage.error('加载院校入围信息失败')
  } finally {
    loading.value = false
  }
}

// 打开入围查询页面
const openQueryPage = (url) => {
  if (url) {
    window.open(url, '_blank')
  }
}

// 打开交流群
const openCommunicationGroup = (url) => {
  if (url) {
    window.open(url, '_blank')
  }
}

// 页面加载时获取数据
onMounted(() => {
  loadSchools()
})
</script>

<style lang="scss" scoped>
.qualified-page {
  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
    
    h1 {
      font-size: 2.5rem;
      margin-bottom: 16px;
      font-weight: 600;
    }
    
    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .main-content {
    margin-top: -40px;
    position: relative;
    z-index: 1;
    
    .el-card {
      margin-bottom: 30px;
      border-radius: 12px;
      
      .el-card__header {
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        
        h2 {
          margin: 0;
          color: #495057;
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }
    }
    
    .schools-card {
      .no-link {
        color: #909399;
        font-size: 13px;
        background: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 6px 12px;
        display: inline-block;
        min-width: 60px;
        text-align: center;
      }
      
      .school-name {
        font-weight: 500;
        color: #303133;
        font-size: 14px;
      }
      
      .announce-time {
        color: #606266;
        font-size: 14px;
      }
      
      .action-btn {
        min-width: 80px;
      }
      
      :deep(.el-table) {
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        overflow: hidden;
        
        .el-table__header-wrapper {
          th {
            border-bottom: 2px solid #e4e7ed;
          }
        }
        
        .el-table__body-wrapper {
          .el-table__row {
            &:hover {
              background-color: #f5f7fa;
            }
            
            td {
              border-bottom: 1px solid #f0f2f5;
              padding: 16px 0;
              vertical-align: middle;
            }
          }
        }
        
        .cell {
          padding: 0 10px;
          line-height: 1.6;
        }
      }
    }
    
    .notice-card {
      .notice-content {
        h3 {
          margin-top: 0;
          margin-bottom: 16px;
          color: #2c3e50;
          font-size: 16px;
        }
        
        ul {
          padding-left: 20px;
          
          li {
            margin-bottom: 8px;
            line-height: 1.6;
            color: #6c757d;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .qualified-page {
    .page-header {
      padding: 40px 0;
      
      h1 {
        font-size: 2rem;
      }
      
      .subtitle {
        font-size: 1rem;
      }
    }
    
    .schools-card {
      :deep(.el-table) {
        font-size: 12px;
        
        .el-table__cell {
          padding: 12px 5px;
        }
        
        .el-button--small {
          font-size: 11px;
          padding: 4px 8px;
          min-width: 70px;
        }
        
        .cell {
          padding: 0 5px;
        }
      }
      
      .no-link {
        font-size: 11px;
        padding: 4px 8px;
        min-width: 50px;
      }
      
      .school-name {
        font-size: 13px;
      }
      
      .announce-time {
        font-size: 12px;
      }
    }
    
    .notice-content {
      .el-row {
        .el-col {
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>